<template>
	<view class="g-arcgis">
		<!-- 视图层 - 地图 -->
		<template>
			<view id="viewDiv" :style="[{height: screenHeight + 'px'}]"></view>
		</template>

		<!-- 逻辑层 -->
		<view :msg="valueChangeSign" :change:msg="myMapViews.renderjsFn">
			<slot></slot>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			mapConfig: Object,
			sign: {
				type: Object,
				default () {
					return {}
				}

			}
		},
		data() {
			return {
				screenHeight: 600,
				// valueChangeSign: '' 
				isCreate: false,
				viewer: null
			}
		},
		computed: {
			// 调用视图层方法的信号
			valueChangeSign() {
				let params = {
					_time: new Date().getTime(),
					// isCreate: this.isCreate,
					...this.sign,
				}
				console.log('=====params======', params);
				if (!this.viewer) {
					params = {
						type: 'createMap',
						mapConfig: this.mapConfig
					}
				}
				// if (!params.isCreate) params.mapConfig = this.mapConfig
				return params
			}
		},
		methods: {
			viewFn(params) {
				console.log('params: ', params);
				this.$emit('loaded', )
			}
		}

	}
</script>

<!-- RenderJS视图层代码 -->
<script module="myMapViews" lang="renderjs">
	import GMap from "@/arcgis/index.js"
	// import mapConfig from "./map.json"

	export default {
		name: 'myMapView',
		data() {
			return {
				myMapObject: {}, // 对象，存储关于地图的图层、方法、属性等
				gMap: {},
				viewer: {},
				mapConfig: {}
			}
		},
		methods: {
			async init() {
				try {
					console.log('mapConfig: ', this.mapConfig);
					this.mapConfig.baseUrl = 'http://222.74.215.218:56082' + this.mapConfig.baseUrl
					this.gMap = new GMap.Viewer(this.mapConfig, 'viewDiv');
					this.viewer = await this.gMap.initViewer();

					this.$ownerInstance.callMethod('viewFn', )
				} catch (err) {
					console.log('err: ', err);
				}
			},
			// 逻辑层调用视图层(地图), 次为唯一入口
			renderjsFn(data) {
				console.log('--------');
				if (data.type == 'createMap') {
					this.mapConfig = JSON.parse(JSON.stringify(data.mapConfig))
					this.init()
				} else if (data.type == 'growthSwitch') {
					// 长势图层切换
					this.checkboxChange(data.param)
				}
			},
			checkboxChange({
				ids,
				value,
			}) {
				try {
					this.viewer.map.layers.map(item => {
						// 判断是否为长势
						if ((ids || []).includes(item.id)) {
							if (value.includes(item.id)) {
								item.visible = true
							} else {
								item.visible = false
							}
						}
					})
				} catch (e) {
					console.log(e);
				}
			},
			aaa() {
				console.log('aaa');
			}
		},
		mounted() {
			// 页面初始化完成后
			// this.init();
		},
	}
</script>

<style>
	@import "@/arcgis/style/main.css";

	html,
	body,
	#viewDiv {
		padding: 0;
		margin: 0;
		height: 100%;
	}
</style>